<template>
  <div class="contract">
    <x-header>合同信息
      <div href="javascript:;" class="headerAdd" @click="bindHeaderAdd">
        <img src="../../assets/img/securityCheckImg/addHeader.png" alt="">
      </div>
    </x-header>
<!-- {{CONS_NO}} -->
    <div class="contractContent" v-for="(item, index) in dataList" :key="index" @click="contractClick($event,item)">
      <div class="contractContent-head">
        <div class="contractContent-head-for">
          <div class="contractContent-head-title">
            <img class="contractContent-head-icon" src="../../assets/img/securityCheckImg/forSignatory.png" alt=""/>
            <div class="contractContent-head-text">供气方签约人</div>
          </div>
          <div class="contractContent-head-name">{{item.ELEC_FILE_NAME}}</div>
        </div>
          <img class="contractContent-head-image" src="../../assets/img/securityCheckImg/goBack.png" alt=""/>
        <div class="contractContent-head-use">
          <div class="contractContent-head-title">
            <img class="contractContent-head-icon" src="../../assets/img/securityCheckImg/useSignatory.png" alt=""/>
            <div class="contractContent-head-text">用气方签约人</div>
          </div>
          <div class="contractContent-head-name">{{item.FILE_NAME}}</div>
        </div>
      </div>
      <div class="information-item">
        <div class="information-item-title">合同编号</div>
        <div class="information-item-answer">{{item.CONT_NO}}</div>
      </div>
      <div class="information-item">
        <!-- 不确定 -->
        <div class="information-item-title">合同类型</div>
        <div class="information-item-answer">{{item.SIGN_TYPE_NAME}}</div>
      </div>
      <!-- <div class="information-item">
        <div class="information-item-title">证件号码</div>
        <div class="information-item-certificates">
          <div class="information-item-answer">2018年5月1日</div>
          <div class="information-item-line"></div>
          <div class="information-item-answerID">身份证</div>
        </div>
      </div> -->
      <div class="information-item">
        <div class="information-item-title">签订日期</div>
        <div class="information-item-answer">{{item.EFFECT_DATE}}</div>
      </div>
      <div class="information-item">
        <div class="information-item-title">到期日期</div>
        <div class="information-item-answer">{{item.END_DATE}}</div>
      </div>
      <div class="information-item">
        <div class="information-item-title">签约地点</div>
        <div class="information-item-answer">{{item.SIGN_ADDR}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { XHeader } from "vux";
import { getsn } from "@/utils/getsn";
import { sqlQuery,scanNewMeterAction,sqlInsert, sqlUpdata } from "@/utils/sqlOperation";
export default {
  data() {
    return {
      dataList: [],
      SIGN_TYPE_LIST:[],
      CONS_NO:''
    };
  },
  components: {
    XHeader
  },
  methods: {
    bindHeaderAdd() {
      this.$router.push({
        path: "/contractMaintain?CONS_NO="+this.CONS_NO
      });
    },
    callback(str, msg) {
        const _this = this;
      console.log(str, msg);
      switch (str) {
        case "change":
          const msgData = msg.map(function(item) {
                // 合同类型
                for (let i in _this.SIGN_TYPE_LIST) {
                  if (_this.SIGN_TYPE_LIST[i].value == item.SIGN_TYPE) {
                    item.SIGN_TYPE_NAME = _this.SIGN_TYPE_LIST[i].name;
                  }
                }
                return item;
              });
              Vue.set(_this, "dataList", msgData);
          break;
        case "noChange":
          Vue.set(this, "dataList", this.dataList.concat(msg));
          break;
        default:
          break;
      }
    },
    contractClick(event, item) {
      this.$router.push({
        path: "/contractMaintain?item=" + JSON.stringify(item) + "&change_type=2"
      });
    }
  },
  mounted() {
    const _that = this;
    Vue.set(this, 'CONS_NO', this.$route.query.CONS_NO)
    // 签订类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["cmCtrSignOperType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const SIGN_TYPE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "SIGN_TYPE_LIST", SIGN_TYPE_LIST);
        }
      }
    );
   sqlQuery(this.CONS_NO, "CUST_COUTRACTINFO", this.callback);


  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
.contractContent {
  padding: 0 0.2778rem;
  background-color: #ffffff;
  border-bottom: 1px solid #d9daeb;
  &-head {
    width: 100%;
    height: 1.7778rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d9daeb;
    &-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    &-icon {
      width: 0.4444rem;
      height: 0.4444rem;
      margin-right: 0.1389rem;
    }
    &-text {
      font-size: 0.4167rem;
      color: #444444;
    }
    &-name {
      font-size: 0.4167rem;
      color: #888888;
      text-align: right;
    }
    &-image {
      width: 0.8472rem;
      height: 0.6389rem;
    }
  }
}
</style>


